<script setup>
import {ref, onMounted} from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import {ajax} from "@/utils/tradeInfo";

const tradeInfo = ref([])
onMounted(async () => tradeInfo.value = await ajax())
const info = ref({
  price: '',
  fileList: [],
  desc: ''
})
const title = ref('')
const submit = async () => {
  if (info.value.desc) {
    const data = {
      TaskID: '222',
      Title: '厕所送纸,急急急！！！',
      Description: '3教二楼左侧第二个坑位',
      Type: '送纸',
      Requirements: '只要不是砂纸就好',
      Reward: info.value.price ? `${info.value.price}RMB` : '0',
      Deadline: `${new Date().getUTCFullYear()}-${String(new Date().getMonth()).padStart(2, '0')}-${String(new Date().getDate() + 7).padStart(2, '0')}`,
      StartDate: `${new Date().getUTCFullYear()}-${String(new Date().getMonth()).padStart(2, '0')}-${String(new Date().getDate()).padStart(2, '0')}`,
      Status: '待审核',
      Priority: '高',
      ClientInformation: {
        ClientName: "ABC公司",
        Contact: "约翰·多",
        Phone: '17785806507'
      },
      AssigneeInformation: {
        AssigneeName: "简·史密斯",
        Phone: '17785806507'
      },
      ImageList: info.value.fileList
    }
    const res = await uni.request({
      url: 'http://localhost:3000/publish',
      method: 'POST',
      data
    })
    console.log(res.data)
    tradeInfo.value.unshift(data)
    info.value = {}
  } else {
    uni.showModal({title: '提示', content: '请先填写信息...'})
  }
}
onLoad(option => {
  const {name} = option
  title.value = name;
})
const uploadFilePromise = (url) => {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: 'http://localhost:3000/upload',
      filePath: url,
      name: 'image',
      formData: {},
      success: (res) => {
        const data = JSON.parse(res.data)
        resolve(data.url)
      }
    });
  });
};
const afterRead = async (event) => {
  let lists = [].concat(event.file)
  let fileListLen = info.value.fileList.length;
  lists.map((item) => {
    info.value.fileList.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    const result = await uploadFilePromise(lists[i].url);
    let item = info.value.fileList[fileListLen];
    info.value.fileList.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result,
      thumb: result
    });
    fileListLen++;
  }
};
const deletePic = (event) => {
  info.value.fileList.splice(event.index, 1);
};
</script>

<template>
  <div class="children content">
    <div class="head">
      <div class="title">{{ title }}</div>
      <div class="submit" @click="submit">发布</div>
    </div>
    <div class="card">
			<textarea
          v-model="info.desc"
          :maxlength="250"
          auto-focus="true"
          class="input"
          placeholder="描述一下宝贝的品牌型号，货品来源..."
          title="评论"
      />
      <div class="imgs">
        <up-upload
            :fileList="info.fileList"
            :maxCount="3"
            height="115px"
            multiple
            width="115px"
            @afterRead="afterRead"
            @delete="deletePic"
        ></up-upload>
      </div>
    </div>
    <div class="price">
      <div class="symbol">￥</div>
      <input
          v-model="info.price"
          class="input"
          placeholder="输入价格"
          type="number"
      />
    </div>
  </div>
</template>

<style scoped>
.children {
  background-color: #eee;
  width: 100%;
  height: calc(100vh - 44px);
}

.children > .head {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.children > .head > .title {
  line-height: 35px;
  font-weight: bold;
}

.children > .head > .submit {
  width: 60px;
  line-height: 35px;
  text-align: center;
  border-radius: 25px;
  font-weight: bold;
  background-color: yellow;
}

.children > .card {
  width: 100%;
  height: 45%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  border-radius: 10px;
  margin-bottom: 15px;
}

.children > .card > .input {
  width: 100%;
  height: 240px;
}

.children > .card > .imgs {
  width: 100%;
  height: 115px;
}

.children > .price {
  width: 100%;
  height: 70px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  display: flex;
}

.children > .price > .symbol {
  line-height: calc(70px - 30px);
  display: inline;
  font-weight: bold;
  font-size: 20px;
  margin-right: 10px;
}

.children > .price > .input {
  width: 100%;
  height: 100%;
  font-weight: bold;
  font-size: 30px;
}
</style>